<template>
    <div v-if="showFullScreenBtn" :title="value ? '退出全屏':'全屏'" class="full-screen-btn-con">
        <img @click="handleChange" :src="value ? iconFullscreenExit:iconFullscreen" width="28px" height="28px" alt="图片">
    </div>
</template>

<script>
    import iconFullscreen from './img/icon-fullscreen.png'
    import iconFullscreenExit from './img/icon-fullscreen-exit.png'

    export default {
        name: 'Fullscreen',
        computed: {
            showFullScreenBtn () {
                return window.navigator.userAgent.indexOf('MSIE') < 0
            }
        },
        props: {
            value: {
                type: Boolean,
                default: false
            }
        },
        data(){
            return{
                iconFullscreen:iconFullscreen,
                iconFullscreenExit:iconFullscreenExit,
                textTips:this.value ? '退出全屏':'全屏'
            }
        },
        methods: {
            getIcon(){
                return this.value ? this.iconFullscreenExit:this.iconFullscreen;
            },
            handleFullscreen () {
                let main = document.body;
                if (this.value) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen()
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen()
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen()
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen()
                    }
                } else {
                    if (main.requestFullscreen) {
                        main.requestFullscreen()
                    } else if (main.mozRequestFullScreen) {
                        main.mozRequestFullScreen()
                    } else if (main.webkitRequestFullScreen) {
                        main.webkitRequestFullScreen()
                    } else if (main.msRequestFullscreen) {
                        main.msRequestFullscreen()
                    }
                }
            },
            handleChange () {
                this.handleFullscreen()
            }
        },
        mounted () {
            let isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
            isFullscreen = !!isFullscreen;
            document.addEventListener('fullscreenchange', () => {
                this.$emit('input', !this.value);
                this.$emit('on-change', !this.value)
            });
            document.addEventListener('mozfullscreenchange', () => {
                this.$emit('input', !this.value);
                this.$emit('on-change', !this.value)
            });
            document.addEventListener('webkitfullscreenchange', () => {
                this.$emit('input', !this.value);
                this.$emit('on-change', !this.value)
            });
            document.addEventListener('msfullscreenchange', () => {
                this.$emit('input', !this.value);
                this.$emit('on-change', !this.value)
            });
            this.$emit('input', isFullscreen)
        }
    }
</script>

<style scoped>
    .full-screen-btn-con{
        display: flex;
        align-items: center;
        margin-right: 15px;
        cursor: pointer;
        position: relative;
    }

    .full-screen-btn-con .ivu-tooltip-rel{
        height: 64px;
        line-height: 64px;
    }

    .full-screen-btn-con .ivu-tooltip-rel i{
        cursor: pointer;
    }
</style>
